<template>
  <z-paging ref="paging" v-model="dataList" auto-show-system-loading @query="queryList">
    <search placeholder="搜索" :show-back="false" :readonly="false" v-model="keyWord" slot="top" @confirm="toSearch"/>
    <view class="list">
      <view class="item" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
        <c-image :src="item.image" height="300rpx" radius="16rpx" loadingIcon="icon" mode="aspectFill"/>
        <view class="info">
          <view class="name bold line-1">{{ item.title }}</view>
          <view class="time fz-24 gray">{{ $utils.dateFormat(item.createTime, 'yyyy-MM-dd') }}</view>
        </view>
      </view>
    </view>
    <tabbar slot="bottom"/>
  </z-paging>
</template>

<script>
	import {getCaseList} from "@/api/home";

  export default {
		data() {
			return {
        dataList: [], // 列表数据
        keyWord: '' // 搜索关键字
			};
		},
    computed: {
    },
    methods: {
      queryList(pageNo, pageSize) {
        getCaseList({pageNum: pageNo, pageSize, keyWord: this.keyWord}).then(res => {
          this.$refs.paging.completeByTotal(res.records || [], res.total);
        })
      },
      toSearch() {
        this.$refs.paging.reload();
      },
      toDetail(item) {
        uni.navigateTo({
          url: `/pages/case/detail?id=${item.id}`
        });
      }
    }
	}
</script>

<style lang="scss">
.list {
  padding: 0 20rpx;
  position: relative;
  .item {
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    margin-top: 20rpx;
    background: #fff;
    .info {
      padding: 16rpx;
    }
    .name {

    }
  }
}
</style>
